<template>
  <x-border title="岗位权限" icon="flaticon-add-circular-button" v-loading="!async">
    <div class="role-box">
      <el-form class="form-open" v-if="async">
        <el-form-item label="岗位名称" :required="true">
          <el-input v-model="viewModel.name"></el-input>
          <div class="help-back">请输入岗位名称，长度不能超过20个字</div>
        </el-form-item>
        <el-form-item label="岗位说明" :required="true">
          <el-input type="textarea" v-model="viewModel.summary" rows="3"></el-input>
          <div class="help-back">请输入岗位说明，说明不能超过300个字</div>
        </el-form-item>
        <x-line :border="true" title="选择该岗位的权限" type="metal" icon="flaticon-layers"></x-line>
        <el-form-item label="选择该岗位的权限" :required="true">
          <div class="role-item_box">
            <div class="el-tree_list">
              <el-tree v-if="async" ref="role_list" :data="viewTree" show-checkbox node-key="id" :props="defaultProps" :default-checked-keys="viewModel.roleIds" @check="change">
              </el-tree>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div class="role-foot">
        <el-button class="role-foot_right" :loading="loading" @click="save">保存岗位权限</el-button>
      </div>
    </div>
  </x-border>
</template>
<script>
  import ala from 'ala'
  export default {
    data () {
      return {
        async: false,
        viewModel: null,
        viewTree: null,
        defaultProps: {
          children: 'appItems',
          label: 'name'
        },
        loading: false,
        roleIdsList: []
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        var paras = {
          id: this.$ala.urlId(),
          themeId: this.$ala.themeId()
        }
        this.viewModel = await this.$ala.httpGet('api/PostRole/EditView', paras)

        var paraTree = {
          themeId: ala.themeId()
        }
        var response = await this.$ala.httpGet('api/PostRole/tree', paraTree)
        if (response) {
          this.viewTree = response
        }
        this.async = true
      },
      change (e, b) {
        this.viewModel.roleIds = this.$refs.role_list.getCheckedKeys()
      },
      async save () {
        this.roleIdsList = [...this.viewModel.roleIds]
        this.$refs.role_list.getHalfCheckedNodes().forEach(item => {
          this.roleIdsList.push(item.id)
        })
        this.loading = true
        var para = {
          id: this.$route.query.id,
          name: this.viewModel.name,
          summary: this.viewModel.summary,
          roleIds: this.roleIdsList
        }
        var response = await this.$ala.httpPost('api/PostRole/Edit', para)
        if (response) {
          this.$ala.toMessage(response)
        }
        this.loading = false
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang='scss'>
  @import "./styles/style.scss";
</style>
